<template>
	<view>
		<u-navbar :is-back="false" :background="{
			backgroundImage:'linear-gradient(90deg, rgba(253, 49, 41, '+opacity+'), rgba(255, 77, 70, '+opacity+'))'
		}"
		 immersive title-color="#fff" :title="opacity == 1 ? info.gasName : ' '" :border-bottom="false" back-icon-color="#fff">
			<view @click="$u.route({
				type:'back'
			})" class="back-icon" :style="{
		 	backgroundColor:`rgba(0,0,0,${opacity == 1 ? '0' : '0.3'})`
		 }">
				<u-icon color="#ffffff" size="30" name="arrow-left"></u-icon>
			</view>
		</u-navbar>

		<view class="loading" v-if="loading || fail">
			<u-loading :show="loading"></u-loading>
			<u-empty mode="page" :show="fail"></u-empty>
		</view>
		<block v-else>

			<u-swiper bottom="42rpx" indicatorPos="bottomRight" border-radius="0" bg-color="#F9F9F9" mode="number" :list="list"
			 height="400" @click="preview"></u-swiper>
			<view class="content">
				<view class="upper">
					<view class="name">{{info.gasName}}
						<u-icon name="more-circle" @click="share"></u-icon>
					</view>
					<view class="map" @click="openMap">
						<u-icon name="map"></u-icon><text style="margin-left:10rpx">{{distance || '未知'}}</text><text>{{info.gasAddress}}</text>
					</view>
					<view class="time">
						<u-icon name="clock"></u-icon>
						<text style="margin-left:10rpx">{{info.businessHours}}</text>
						<block v-if="info.isinvoice == 1">
							<u-icon name="order"></u-icon>
							<text style="margin-left:10rpx">站内开票</text>
						</block>
					</view>
				</view>
				<view class="row">
					<u-row gutter="16" align="bottom">
						<u-col span="3">
							<view class="item first" @click="showOil = true">
								<view>
									<text style="margin-right: 10rpx;">{{priceObj.oilName || info.gasOilPrice.oilName}}</text>
									<u-icon size="19" name="arrow-down-fill"></u-icon>
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view class="item" style="color: #FF4D46;">
								<view>活动价</view>
								<view><text>￥</text>{{priceObj.priceYfq || info.gasOilPrice.priceYfq}}</view>
							</view>
						</u-col>
						<u-col span="3">
							<view class="item">
								<view>油站价</view>
								<view><text>￥</text>{{priceObj.priceGun || info.gasOilPrice.priceGun}}</view>
							</view>
						</u-col>
						<u-col span="3">
							<view class="item">
								<view>国标价</view>
								<view><text>￥</text>{{priceObj.priceOfficial || info.gasOilPrice.priceOfficial}}</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="list">
				<view class="title">加油订单</view>
				<view class="item" v-for="(item,index) in info.gasOilOrderVOS" :key="index">
					<u-icon :name="appletImgUrl+'oll-detail-list-icon.png'" width="58" height="58"></u-icon>
					<view style="width: 30%;margin-left: 20rpx;">{{item.phone}}</view>
					<view style="width: 30%;">消费￥{{item.amountGun}}</view>
					<view>节省<text>￥{{item.amountDiscounts}}</text></view>
				</view>
				<u-loadmore status="nomore"></u-loadmore>
				<u-gap></u-gap>
			</view>
			<u-gap height="130"></u-gap>
			<view class="submit-btn" @click="showPurchase = true">
				<view class="btn">
					立即加油
				</view>
				<view class="safe-area-inset-bottom"></view>
			</view>
			<view class="safe-area-inset-bottom"></view>

			<u-popup border-radius="40" mode="bottom" closeable v-model="showPurchase">
				<view class="purchase-popup">
					<view class="title">选择油号/枪号</view>

					<view class="item">
						<view class="title">全部商品</view>
						<view class="choices">
							<view @click="oilInddex = index" :class="[index == oilInddex ? 'active' : '']" v-for="(item,index) in info.newOilPriceList"
							 :key="index">
								<text v-if="item[0] == 1">汽油</text>
								<text v-if="item[0] == 2">柴油</text>
								<text v-if="item[0] == 3">天然气</text>
							</view>
						</view>
					</view>

					<view class="item">
						<view class="title">选择油号</view>
						<view class="choices">
							<view @click="oilNumberIndex = index == oilNumberIndex ? null : index" :class="[index == oilNumberIndex ? 'active' : '']"
							 v-for="(item,index) in info.newOilPriceList[oilInddex][1]" :key="index">
								<text>{{item.oilName}}</text>
							</view>
						</view>
					</view>

					<view class="item">
						<view class="title">选择枪号</view>
						<view class="choices">
							<view @click="oilGunIndex = index == oilGunIndex ? null : index" :class="[index == oilGunIndex ? 'active' : '']"
							 v-for="(item,index) in info.newOilPriceList[oilInddex][1][oilNumberIndex].gunNos" :key="index">
								<text>{{item.gunNo}}号</text>
							</view>
						</view>
					</view>

					<view class="tip">
						<view>选择油号</view>
						<view>1.请务必先到达油站与工作人员确认后在1付款，切勿 先买单后加油，避免异常订单的产生！</view>
						<view>2.若无您选择的油号，请联系油站工作人员。</view>
					</view>
					<view class="submit-btn">
						<view class="btn" @click="submit">
							确认
						</view>
						<view class="safe-area-inset-bottom"></view>
					</view>
				</view>
			</u-popup>


			<u-popup safe-area-inset-bottom border-radius="40" mode="bottom" v-model="showOil">
				<view class="oil-popup">
					<view class="item" v-for="(e,i) in info.newOilPriceList" :key="i">
						<view class="title" v-if="e[0] == 1">汽油</view>
						<view class="title" v-if="e[0] == 2">柴油</view>
						<view class="title" v-if="e[0] == 3">天然气</view>
						<view class="btn" v-for="(item,index) in e[1]" :key="index">
							<view @click="choiceOil(i,index)" :style="{
								'width':'152rpx',
								'border-color':oilPIndex == i && oilCIndex == index ? '#FD3129' : 'rgba(0,0,0,.1)',
								'color':oilPIndex == i && oilCIndex == index ? '#fff' : '#000',
								'background-color':oilPIndex == i && oilCIndex == index ? '#FD3129' : ''
							}"
							 size="mini">{{item.oilName}}</view>
						</view>
					</view>
				</view>
			</u-popup>

			<u-modal :confirm-style="{
				'background': 'linear-gradient(90deg, #FD3129, #FF4D46)'
			}" title="油卡提示"
			 cancel-text="暂不开通" confirm-text="立即开通" show-cancel-button confirm-color="#fff" v-model="isOpen" @confirm="$u.route('/pages/other/openOil/openOil')"
			 content="开通中盈甄品油卡享受更多优惠，是否选择开通？"></u-modal>

			<u-popup mode="center" v-model="showShare" :backgroundColor="'transparent'">
				<view class="share-popup">
					<u-image :src="shareURL" :show-loading="false" width="600" height="900"></u-image>
					<view class="btn">
						<view @click="saveShareBG">保存海报</view>
						<view>分享好友</view>
					</view>
				</view>
			</u-popup>

			<view class="canvas-box">
				<canvas class="canvas" canvas-id="share" style="width: 600rpx;height: 900rpx;"></canvas>
			</view>
		</block>
	</view>
</template>

<script>
     import {appletImgUrl} from "@/common/config.js"
	import QQMapWX from "@/common/qqmap-wx-jssdk.min"
	let qqmapsdk = ''
	import WSCoordinate from '@/js_sdk/WSCoordinate'
	import {
		base64src
	} from '@/js_sdk/base64src'
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				showOil: false,
				oilPIndex: null,
				oilCIndex: null,
				showShare: false,
				oilInddex: null,
				priceObj: '',
				shareURL: '',
				showPurchase: false,
				oilGunIndex: 0,
				isOpen: true,
				oilNumberIndex: 0,
				distance: '',
				loading: true,
				fail: false,
				info: '',
				opacity: 0,
				list: [],
			};
		},
		onLoad(options) {
			const self = this
			this.$u.get('oilcardopenorder/checkUserOilCardIsOpen').then(res => {
				this.isOpen = !res.OilCardIsOpen ? true : false
			})
			qqmapsdk = new QQMapWX({
				key: 'HQSBZ-EMKE5-6N5IW-QYGDQ-U6EMS-P2BOO'
			});
			this.gasId = options.gasIds
			this.$u.post('gasoilstation/getGasOilInfo', {
				gasId: options.gasIds || 'DF123456789'
			}).then(res => {
				var map = res.oilPriceList.reduce((all, m) => {
					let list = all.get(m.oilType);
					if (!list) {
						list = [];
						all.set(m.oilType, list);
					}
					list.push(m);
					return all;
				}, new Map());
				res.newOilPriceList = [...map]
				this.oilInddex = res.newOilPriceList.findIndex(item => item[0] == res.gasOilPrice.oilType)
				this.info = res
				this.list = [{
					image: res.gasLogoSmall
				}]
				if (options.distance) {
					this.distance = options.distance
				} else {
					uni.getLocation({
						type: 'gcj02',
						altitude: true,
						success(res) {
							let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(self.info.gasAddressLatitude, self.info.gasAddressLongitude);
							qqmapsdk.calculateDistance({
								from: `${res.latitude},${res.longitude}`,
								to: `${GCJ_Coordinate.latitude},${GCJ_Coordinate.longitude}`,
								success({
									result
								}) {
									let {
										elements
									} = result
									let distance = elements[0].distance
									distance = distance < 1000 ? distance + '米' : (Math.round(distance / 100) / 10).toFixed(1) +
										'公里'
									self.distance = distance
								}
							})
						}
					})
				}
				this.loading = false
			}).catch(error => {
				console.log(error);
				this.loading = false
				this.fail = true
			})
		},
		methods: {
			share() {
				let self = this
				this.$u.post('user/getwxacodeunlimit', {
					// page: 'pages/other/openOil/openOil',
					page: 'pages/tabBar/newIndex/newIndex',
					scene: uni.getStorageSync('userInfo').id,
					line_color: {
						'r': '255',
						'g': '36',
						'b': '34'
					},
					is_hyaline: true
				}).then(res => {
					uni.showLoading({
						title: '绘制中...',
						mask: true
					});
					let codeImageURL = res
					codeImageURL = codeImageURL.replace(/[\r\n]/g, "")
					const context = uni.createCanvasContext('share')
					uni.getImageInfo({
						src: 'https://photo.hiyipin.net/USER/bb0d23c1-f390-4f2c-a291-0c937937d37c.png',
						success(imgRssult) {
							self.drawImage(context, uni.upx2px(600), uni.upx2px(900), imgRssult.path, imgRssult.width, imgRssult.height,
								0, 0)

							base64src('data:image/png;base64,' + codeImageURL, wxacode => {
								context.drawImage(wxacode, uni.upx2px(142), uni.upx2px(330), uni.upx2px(
										320),
									uni.upx2px(320))

								context.draw(false, () => {
									uni.canvasToTempFilePath({
										canvasId: 'share',
										success({
											tempFilePath
										}) {
											self.showShare = true
											self.shareURL = tempFilePath
											uni.showToast({
												title: '绘制成功！'
											});
											self.showShare = true
											wx.getFileSystemManager().unlink({
												filePath: wxacode,
												success(res) {

												},
												fail(error) {
													console.log(error);
												}
											})
										}
									})
								})
							})
						},
						fail(error) {
							console.log(error);
						}
					})
				})
			},
			saveShareBG() {
				uni.saveImageToPhotosAlbum({
					filePath: this.shareURL,
					success(res) {
						uni.showToast({
							title: '保存成功'
						})
					}
				})
			},
			drawImage(ctx, bg_w, bg_h, imgPath, imgWidth, imgHeight, x, y) {
				let dWidth = bg_w / imgWidth; // canvas与图片的宽度比例
				let dHeight = bg_h / imgHeight; // canvas与图片的高度比例
				if (imgWidth > bg_w && imgHeight > bg_h || imgWidth < bg_w && imgHeight < bg_h) {
					if (dWidth > dHeight) {
						ctx.drawImage(imgPath, 0, (imgHeight - bg_h / dWidth) / 2, imgWidth, bg_h / dWidth, x, y, bg_w, bg_h)
					} else {
						ctx.drawImage(imgPath, (imgWidth - bg_w / dHeight) / 2, 0, bg_w / dHeight, imgHeight, x, y, bg_w, bg_h)
					}
				} else {
					if (imgWidth < bg_w) {
						ctx.drawImage(imgPath, 0, (imgHeight - bg_h / dWidth) / 2, imgWidth, bg_h / dWidth, x, y, bg_w, bg_h)
					} else {
						ctx.drawImage(imgPath, (imgWidth - bg_w / dHeight) / 2, 0, bg_w / dHeight, imgHeight, x, y, bg_w, bg_h)
					}
				}
			},
			submit() {
				if (this.oilGunIndex == null) {
					uni.showToast({
						title: '请选择枪号',
						icon: 'none'
					})
					return
				}
				this.$u.post('gasoilstation/redirectH5Pay', {
					gasId: this.gasId,
					gunNo: this.info.newOilPriceList[this.oilInddex][1][this.oilNumberIndex].gunNos[this.oilGunIndex].gunNo
				}).then(res => {
					console.log(res);
					this.showPurchase = false
					uni.setStorageSync('oilPayURL', res)
					this.$u.route('/pages/webView/webView', {
						scene: 'oil'
					})
				})
			},
			choiceOil(i, index) {
				this.oilPIndex = i;
				this.oilCIndex = index
				this.showOil = false
				this.priceObj = this.info.newOilPriceList[i][1][index]
				// console.log(this.info.newOilPriceList[i][index]);
			},
			openMap() {
				let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(this.info.gasAddressLatitude, this.info.gasAddressLongitude);
				uni.openLocation({
					latitude: GCJ_Coordinate.latitude,
					longitude: GCJ_Coordinate.longitude,
					name: this.info.gasName,
					address: this.info.gasAddress
				})
			},
			preview(e) {
				uni.previewImage({
					urls: [this.info.gasLogoSmall]
				})
			}
		},
		onPageScroll({
			scrollTop
		}) {
			var opacity = 0,
				maxNumber = uni.getSystemInfoSync().statusBarHeight + 44
			if (scrollTop <= maxNumber) {
				opacity = scrollTop / maxNumber
			} else {
				opacity = 1
			}
			if (opacity == this.opacity) return
			this.opacity = opacity
		}
	}
</script>

<style lang="scss">
	.share-popup {
		.btn {
			margin-top: 78rpx;
			display: flex;
			justify-content: space-between;

			view {
				background: #FFFFFF;
				border-radius: 40rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				width: 240rpx;
				text-align: center;
			}
		}
	}

	.canvas-box {
		position: absolute;
		bottom: 0;
		left: -99999px;
		opacity: 0;
		z-index: -999;
	}

	.oil-popup {
		padding: 0 15rpx;
		padding-bottom: 30rpx;

		.item {
			margin-top: 30rpx;

			>.title {
				padding: 0 15rpx;
				margin-bottom: 20rpx;
			}

			.btn {
				display: inline-block;
				margin: 10rpx 15rpx;

				view {
					text-align: center;
					font-size: 22rpx;
					line-height: 55rpx;
					padding: 0 20rpx;
					border: 1rpx solid rgba($color: #000000, $alpha: .1);
					border-radius: 10rpx;
				}
			}
		}
	}

	.loading {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.purchase-popup {
		.submit-btn {
			position: static;
			margin-top: 90rpx;
		}

		.tip {
			padding: 0 30rpx;
			margin-top: 16rpx;

			view {
				line-height: 40rpx;
			}
		}

		>.title {
			line-height: 90rpx;
			text-align: center;
			font-weight: 800;
			font-size: 36rpx;
		}

		.item {
			margin-top: 30rpx;
			padding: 0 18rpx;

			&:nth-child(2) {
				margin-top: 0;
			}

			.choices {
				>view {
					display: inline-block;
					width: 156rpx;
					line-height: 60rpx;
					text-align: center;
					border: 1rpx solid #AAAAAA;
					font-size: 30rpx;
					margin: 14rpx 12rpx;
					border-radius: 10rpx;

					&.active {
						color: #fff;
						border-color: transparent;
						background: linear-gradient(90deg, #FD3129, #FF4D46);
					}
				}
			}

			>.title {
				font-size: 30rpx;
				padding-left: 12rpx;
			}
		}
	}

	.submit-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: linear-gradient(90deg, #FD3129, #FF4D46);
		border-radius: 40rpx 40rpx 0px 0px;
		z-index: 10;

		.btn {
			text-align: center;
			line-height: 100rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}

	.list {
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 0;

		.item {
			padding: 20rpx 0;
			display: flex;
			align-items: center;

			>view {
				font-size: 30rpx;

				&:last-child {
					flex: 1;
					text-align: right;

					text {
						color: #FF4D46;
					}
				}
			}
		}

		.title {
			font-size: 36rpx;
			margin-bottom: 10rpx;
		}
	}

	.content {
		border-radius: 40rpx 40rpx 0px 0px;
		transform: translateY(-30rpx);
		background-color: #fff;
		padding-bottom: 30rpx;

		.row {
			margin-top: 50rpx;

			.item {
				text-align: center;
				height: 100rpx;

				&.first {
					font-size: 36rpx;
					position: relative;

					>view {
						position: absolute;
						bottom: 0;
						width: 100%;
						text-align: center;
					}
				}

				>view {
					&:first-child {
						font-size: 30rpx;
					}

					&:last-child {
						font-size: 48rpx;
						font-weight: bold;

						text {
							font-size: 30rpx;
						}
					}
				}
			}
		}

		.upper {
			padding: 30rpx;

			.time {
				margin-top: 10rpx;
			}

			.name {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
			}

			.map,
			.time {
				font-size: 30rpx;

				>text {
					margin-right: 30rpx;
				}
			}
		}
	}

	.back-icon {
		margin-left: 20rpx;
		background-color: rgba($color: #000000, $alpha: .3);
		width: 54rpx;
		height: 54rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	page {
		background-color: #F9F9F9;
	}
</style>
